<!--
 * @Descripttion: 大二一名学习前端开发的计科学生，缓慢成长中！
 * @emial: 2392862431@qq.com
 * @Author: SummerSofts
 * @Date: 2023-09-06 20:59:08
 * @LastEditors: SummerSofts
 * @LastEditTime: 2023-09-11 19:40:17
-->
<template>
    <div class="iconBox">
        <div class="iconItem" id="copy_text" v-for="item in iconList" :key="item.id"
            :data-clipboard-text="`<wmIcon icon='${item.icon}'></wmIcon>`" @click="handleCopy">
            <wmIcon :size="size" :icon="item.icon"></wmIcon>
            <span class="name">{{ item.name }}</span>
        </div>
    </div>
</template>
   

    
<script setup>
import Clipboard from "clipboard";
import { ref, reactive, onMounted } from "vue"
import { wmIcon } from "warmheart-design"
let size = ref(30)
const handleCopy = () => {
    let clipboard = new Clipboard("#copy_text");
    clipboard.on("success", (e) => {
        alert("复制成功！")
        clipboard.destroy(); // 释放内存
    });
    clipboard.on("error", (e) => {
        // 不支持复制
        alert("复制失败，不支持！")
        clipboard.destroy(); // 释放内存
    });

}
let iconList = reactive([
    {
        icon: "yuyin",
        name: "microphone"
    },
    {
        icon: "shengyin",
        name: "sound"
    },
    {
        icon: "duanshipinhuati",
        name: "shortVideo"
    },
    {
        icon: "yinle",
        name: "music"
    },
    {
        icon: "shangyishoushangyige",
        name: "last"
    },
    {
        icon: "xiayigexiayishou",
        name: "next"
    },
    {
        icon: "bofang",
        name: "play"
    },
    {
        icon: "zanting",
        name: "pause"
    }
])
</script>
    
    
<style lang="less" scoped>
.iconBox {
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    .iconItem {
        width: auto;
        flex: 0 0 calc(15% - 10px);
        /* 控制每行四个元素，并设置间距 */
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px;
        cursor: pointer;


        .name {
            font-size: 14px;
            color: #7b7b7b;
        }
    }

    .iconItem:hover {
        background-color: rgb(224, 222, 222);
        opacity: .8;
    }
}
</style>
    